<script setup lang="ts">
// 父->子数据传递
// 第一步：在子组件中定义接收的数据
// const prop = defineProps<{
//   name: string
//   age: number
//   male: boolean
// }>()
// 设置默认值的写法：
const prop = withDefaults(
  defineProps<{
    name?: string
    age?: number
    male?: boolean
  }>(),
  {
    name: '小明',
    age: 18,
    male: true,
  },
)

// 接收的数据在代码中使用需要点出来
console.log(prop.male)
</script>

<template>
  <div>
    <h2>子组件</h2>
    <!-- defineProps定义的数据，在子组件的结构中可以直接使用，不需要点出来 -->
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>{{ male }}</p>
  </div>
</template>

<style scoped>
div {
  width: 200px;
  height: 200px;
  background: aqua;
}
</style>
